<template>
  <div class="container">
    <div class="map" id="map"></div>
  </div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  mapKey,securityJsCode,location
} from '@/utils/mapParams'
import {shallowRef,onMounted} from "vue";
const mapRef = shallowRef(null)
const locaRef = shallowRef(null)
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: securityJsCode,
  }
  AMapLoader.load({
    key:mapKey,
    version:"2.0",
    plugins:[''],
    "Loca":{
      "version": '2.0.0'
    },
  }).then((AMap)=>{
    mapRef.value = new AMap.Map("map",{//设置地图容器id
      zoom: 18,
      center: [...location],
      showLabel: false,
      viewMode: '3D',
      pitch: 50,
    });

    // eslint-disable-next-line no-undef
    locaRef.value = new Loca.Container({
      map: mapRef.value
    });
    const geoJSON = {
      type:'FeatureCollection',
      features:[
        {
          type:'Feature',
          properties:{
            status:0,//0：流动，1：静止
            name:'北溪1管道',
            type:0,//0代表：直通，1代表：加压
          },
          geometry:{
            type: "LineString",
            coordinates: [
              [120.268628,31.484544],
              [120.269111,31.484535],
              [120.270023,31.484549],
              [120.270243,31.484247],
              [120.270575,31.484274],
              [120.270666,31.484539],
            ],
          }
        },{
          type:'Feature',
          properties:{
            status:0,//0：流动，1：静止
            name:'北溪2管道',
            type:1,//0代表：直通，1代表：加压
          },
          geometry:{
            type: "LineString",
            coordinates: [
              [120.268623,31.483821],
              [120.26888,31.483835],
              [120.268928,31.483725],
              [120.269089,31.483625],
              [120.26917,31.483597],
              [120.269422,31.483684],
              [120.269545,31.483625],
              [120.269669,31.483474],
              [120.269522,31.484645],
            ]
          }
        }
      ]
    }
    var geo = new Loca.GeoJSONSource({
      data:geoJSON
    });

    var layer = new Loca.PulseLineLayer({
      zIndex: 10,
      opacity: 1,
      visible: true,
      zooms: [2, 22],
    });

    var headColors = ['#FF2B2B', '#1890FF'];
    layer.setSource(geo);
    layer.setStyle({
      altitude: 0,
      lineWidth: 10,
      // 脉冲头颜色
      headColor: (_, feature) => {
        return headColors[feature.properties.type];
      },
      // 脉冲尾颜色
      // trailColor: 'rgba(128, 128, 128, 0.5)',
      // trailColor: 'rgba(128, 128, 128, 0.5)',
      trailColor: (_,feature) => {
        return feature.properties.status === 0 ? 'rgba(255, 255, 255, 1)' : headColors[feature.properties.type]
      },
      // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
      interval: .25,
      // 脉冲线的速度，几秒钟跑完整段路
      duration: 5000,
    });
    locaRef.value.add(layer);
    locaRef.value.animate.start();
  }).catch(e => {
    console.log(e);
  })
}



onMounted(() => {
  initMap()
})
</script>
<script>
  export default {
    beforeRouteEnter(to, from) {
      // console.log(from);
    },
  }
</script>
<style scoped lang="scss">
.container{
  width: 100%;
  height: 100vh;
  .map{
    width:100%;
    height:100%;
  }
}
</style>